<template>
    <div class="news-container">
      <div class="column">
        <div class="title-row">
          <h3 class="title">民俗文化</h3>
          <span class="more" @click="goToArticle(1)">更多</span>
        </div>
        <ul class="news-list">
          <li v-for="(item, index) in cultureList" :key="index" @click="handleItemClick(item, 1)">
            <span class="text">{{ item.title }}</span>
          </li>
        </ul>
      </div>
  
      <div class="column">
        <div class="title-row">
          <h3 class="title">生命文化</h3>
          <span class="more" @click="goToArticle(2)">更多</span>
        </div>
        <ul class="news-list">
          <li v-for="(item, index) in lifeList" :key="index" @click="handleItemClick(item, 2)">
            <span class="text">{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { defineProps } from 'vue';
  import { useRoute, useRouter } from 'vue-router'
  const route = useRoute()
  const router = useRouter()
  defineProps({
    cultureList: {
      type: Array,
      default: []
    },
    lifeList: {
      type: Array,
      default: []
    },
  })

  const handleItemClick = async (item: any, type: number) => {
    console.log(item, type);
    router.push('/article?pid=' + type + '&id=' + item.id)
    
  }

  const goToArticle = (type: number) => {
    router.push('/article?pid=' + type)
  }
  </script>
  
  <style scoped>
  .news-container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 40px auto;
    max-width: 1000px;
  }
  
  .column {
    flex: 1;
  }
  
  .title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  
  .title {
    font-size: 18px;
    font-weight: normal;
    color: #555;
  }
  
  .more {
    font-size: 13px;
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  
  .news-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  
  .news-list li {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }
  
  .text {
    color: #333;
    text-decoration: none;
    cursor: pointer;
  }
  
  .text:hover {
    color: #0077cc;
  }
  
  .tag {
    color: #2b7bd3;
    margin-left: 4px;
    font-size: 13px;
  }
  </style>
  